<template>
<div v-loading.body="loading">

  <div class="maincontent">
    <el-card class="box-card">
      <div class="breadcrumb" slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{name:'产品管理'}">商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="boxtitle">
        <div class="title">
          商品详情
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form label-width="120px">
              <el-form-item label="商品名称：">
                {{goodinfo.goods_name}}

              </el-form-item>
              <el-form-item label="商品颜色分类：">

                <div style="margin-top: 5px">

                </div>
                <el-tabs type="border-card" v-if="goodoption.length" v-model="tapindex">


                  <el-tab-pane v-for="(item,index) of goodoption" :label="item.option_name" :name="String(index+1)" :key="String(index+1)" v-if="item.deleteflag=='0'">
                    <el-row :gutter="20">
                      <el-col :span="8" style="width: 60px">
                        单价:
                      </el-col>
                      <el-col :span="16" style="text-align: left">
                        {{item.option_money}} 元
                      </el-col>

                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="8" style="width: 60px">
                        库存:
                      </el-col>
                      <el-col :span="16" style="text-align: left">
                        {{item.option_stock}} 件
                      </el-col>
                    </el-row>

                  </el-tab-pane>

                </el-tabs>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-carousel>
              <el-carousel-item v-for="(item,index) in goodinfo.goods_imgs" :key="index">
                <div class="carousel-img">
                  <img :src="item">
                </div>

              </el-carousel-item>
            </el-carousel>


          </el-col>
        </el-row>
      </div>

      <div class="boxtitle">
        <div class="title">
          商品介绍
        </div>
      </div>
      <el-row style="z-index: 1">
        <el-col :span="24" style="z-index: 1">
          <div id="editorElem"></div>
          <div style="margin: 0 auto" class="phonebox">
            <div v-html="goodinfo.goods_html" class="cont">

            </div>
          </div>
        </el-col>

      </el-row>



    </el-card>
  </div>





</div>
</template>
<script type="text/ecmascript-6">

import API from "../API"

import merge from "../until/merge"
import {
  mapState
} from 'vuex';
export default {

  components: {

  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
  },
  data() {
    return {

      goodinfo: {},
      tapindex: "1",
      edioptionsindex: null,

      file_url: "",
      goodoption: [],
      editorContent: "",
      loading: false,
      dialogTableVisible: false,
      ly: ""

    }
  },
  methods: {

    initdata() {
      this.loading = true;
      API.searchProductDetail({
        goods_id: this.$route.params.id
      }).then((res) => {
        var json = res.data;
        if (json.message == "success") {
          this.goodinfo = json.infomap;
          this.goodoption = json.list;
          editor.txt.html(this.goodinfo.goods_html);
          this.goodoption.forEach((item) => {
            delete item["createtime"];
            delete item["updtime"];
            item.updtype = "";

          })
        } else {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'error'
          });
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },




  },
  mounted() {


    this.initdata();
  },
  watch: {
    dialogTableVisible(newval) {
      if (!newval) {
        this.ly = "";
      }
    }
  }
}
</script>
<style lang="less">
@import "../css/addgood.less";
.carousel-img {
    height: 300px;
    width: 100%;
    background: #fff;
    text-align: center;
    img {
        height: 100%;
    }
}
.el-carousel {
    z-index: 1;
}
</style>
